<template>
  <a-card :bordered="false">
    <div id="personDetail" ref="personDetail" :style="{ height: screenHeight, width: '100%' }"></div>
  </a-card>
</template>

<script>
import 'echarts/map/js/china'
import 'echarts/map/js/province/hebei.js'
const echarts = require('echarts')
export default {
  name: 'Ce',
  data() {
    // 定义数据项
    return {
      data_list: [
        { name: '江苏', value: 6 },
        { name: '西藏', value: 8 },
        { name: '安徽', value: 118491 },
        { name: '湖北', value: 117036 },
        { name: '湖南', value: 110666 },
        { name: '广东', value: 109915 },
        { name: '浙江', value: 69540 },
        { name: '福建', value: 45146 },
        { name: '山东', value: 42753 },
        { name: '河南', value: 31141 },
        { name: '四川', value: 30287 },
        { name: '河北', value: 29890 },
        { name: '江西', value: 23649 },
        { name: '黑龙江', value: 20475 },
        { name: '陕西', value: 17942 },
        { name: '贵州', value: 16019 },
        { name: '吉林', value: 15441 },
        { name: '广西', value: 11875 },
        { name: '山西', value: 11077 },
        { name: '云南', value: 9238 },
        { name: '辽宁', value: 6538 },
        { name: '甘肃', value: 6128 },
        { name: '重庆', value: 5883 },
        { name: '内蒙古', value: 5 },
        { name: '海南', value: 4596 },
        { name: '天津', value: 4244 },
        { name: '新疆', value: 4125 },
        { name: '上海', value: 3429 },
        { name: '宁夏', value: 3225 },
        { name: '青海', value: 1833 },
        { name: '北京', value: 1765 }
      ],

      screenHeight: document.documentElement.clientHeight * 0.6, // 屏幕高度
      myChinaMap: {},
      card: {
        name: ''
      },
      CardShow: false,
      value1: ''
      // screenHeight:'600px', // 屏幕高度
    }
  },
  mounted() {
    this.chinaMaprsult()
  },
  methods: {
    chinaMaprsult(name) {
      let myChart = this.$echarts.init(this.$refs.personDetail)
      const labelOption = {
        show: true,
        //   rotate: 90,
        formatter: '{c}  {b}',
        fontSize: 16,
        color: '#fff',
        rich: {
          name: {}
        }
      }
      var geo = {
        // map: name ? name : 'china', // 核心
        roam: false,
        label: {
          // 页面初始化加载的文字
          normal: {
            show: true,
            textStyle: {
              color: '#ccc', // 页面初始化的地图文字颜色
              fontSize: 12 // // 页面初始化的地图文字大小
            }
          }
        }
      }
      var series = [
        {
          name: '数据',
          type: 'map',
          map: 'hebei',
          roam: true,
          label: labelOption,
          itemStyle: {
            normal: {
              areaColor: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#073684' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#061E3D' // 100% 处的颜色
                  }
                ]
              },
              // 板块边框颜色
              borderColor: 'rgba(0, 0, 0)'
            },
            emphasis: {
              // 鼠标悬浮在板块上的颜色
              areaColor: 'rgba(43, 145, 183)'
            }
          },
          data: this.data_list
        }
      ]

      let option = {
        // 鼠标悬浮出现黑框
        tooltip: {
          trigger: 'item',
          formatter: '省份：{b}<br/>客户：{c}'
        },
        // geo: geo,
        legend: {
          orient: 'vertical',
          top: 'bottom',
          left: 'right',
          // data: ['西安 Top3', '西宁 Top3', '银川 Top3'],
          data: ['唐山'],
          textStyle: {
            color: '#fff'
          },
          selectedMode: 'multiple'
        },
        series: series
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
      // 点击事件返回省名
      const _this = this
      this.$nextTick(() => {
        _this.myChinaMap = echarts.init(this.$refs.personDetail)

        _this.myChinaMap.on('click', function(param) {
          _this.CardShow = true

          _this.card.name = param.name
        })
      })
    },
    changeTime(e) {},
    // 中国地图点击省份 显示当前省份的详细的地区。
    chinaMapHidden(chinaMap) {
      let that = this
      chinaMap.off('click') //这里解决多次触发点击事件 但是还会执行2次  引用echarts地图，点击各个省份时，点击一个调用两次接口，再点击一次，调用四次接口，再点击调用八次。。。。依次叠加，问题在于，没有将地图上的点击事件清空
      chinaMap.on('click', async function(params) {
        if (params.name in that.provinces) {
          let s = await import(`echarts/map/js/province/${that.provinces[params.name]}.js`)
          if (s) {
            that.chinaMaprsult(params.name)
          }
        }
      })
    }
  }
}
</script>
<style scoped lang="less">
html,
body {
  width: 100%;
  height: 100%;
}
#personDetail {
  height: 100%;
  min-height: 700px;
  width: 100%;
  // background: url(../../assets/map_bg.jpg) no-repeat center;
}
// 卡片
.box-card {
  width: 200px;
  height: 400px;
  // background-color: green;
  position: absolute;
  top: 200px;
  z-index: 999;
  // color: #fff;
}
</style>
